<template>
  <view>
    <scroll-view class="style-scroll-view" refresher-enabled="false" :refresher-threshold="100" scroll-y enable-flex
      @scrolltoupper="onScrollToUpper" @scrolltolower="onScrollToLower" @refresherrefresh="onRefresh"
      @refresherrestore="onRestore" @refresherpulling="onPulling" @refresherabort="onAbort"
      :refresher-triggered="isRefresherTriggered">
      <view class="style-item" v-for="(item, index) in list" :key="index">
        <view class="style-title">
          <view class="style-title-content">{{ item.positionName }}</view>
          <view class="style-title-number">共{{ item.questionNum }}题</view>
        </view>
        <view class="style-level-container" v-if="item.tagInfoList && item.tagInfoList.length > 0">
          <view class="style-level-item" v-for="(levelItem, levelIndex) in item.tagInfoList" :key="levelIndex"
            @tap="clickItem(item, levelItem)">
            <view class="style-level-content">{{ levelItem.tagLabel }}</view>
            <view class="style-level-number">共{{ levelItem.questionNum }}题 </view>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" :load-text="loadText"></u-loadmore>
    </scroll-view>
  </view>
</template>
<script>

import { reqPositionQuestionInfo } from '@/api/modules/company.js';
export default {
  props: {},
  data() {
    return {
      personId: "",
      list: [],
      isRefresherTriggered: false,
      status: 'nomore',
      loadText: {
        loadmore: '加载更多',
        loading: '加载中',
        nomore: '已经到底啦',
      },
      pageNo: 1,
      pageSize: 10,
      totalPage: 0,
      positionId: ''
    };
  },
  mounted() {
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    this.refreshData();
  },
  methods: {
    onScrollToUpper() {
      console.log('onScrollToUpper');
    },
    onScrollToLower() {
      console.log('onScrollToLower');
      this.status = 'loading';
      this.getData();
    },
    onPulling() {
    },
    onRefresh() {
      console.log('onRefresh');
      this.isRefresherTriggered = true;
      this.pageNo = 1;
      this.refreshData();
    },
    onSearch(id) {
      console.log("id:" + id);
      this.positionId = id;
      this.pageNo = 1;
      this.refreshData();
    },
    onRestore() {
      console.log('onRestore');
    },
    onAbort() {
      console.log('onAbort');
    },
    refreshData() {
      setTimeout(() => {
        let params = {
          positionId: this.positionId,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        };
        console.log("params:", params);
        reqPositionQuestionInfo(params).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.list = res.data;
            this.totalPage = res.rankInfo.pages;
            if (this.pageNo == this.totalPage) {
              this.status = 'nomore';
            } else {
              this.pageNo++;
              this.status = 'loadmore';
            }
            this.isRefresherTriggered = false;
          }
        })
      }, 1000);
    },
    getData() {
      if (this.pageNo >= this.totalPage) {
        this.status = 'nomore';
      } else {
        setTimeout(() => {
          let params = {
            positionId: this.positionId,
            pageNo: this.pageNo,
            pageSize: this.pageSize
          }
          reqPositionQuestionInfo(params).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.list.push(...res.data);
              this.totalPage = res.rankInfo.pages;
              if (this.pageNo == this.totalPage) {
                this.status = 'nomore';
              } else {
                this.pageNo++;
                this.status = 'loadmore';
              }
              this.isRefresherTriggered = false;
            }
          })
        }, 1000);
      }
    },

    clickItem(item, levelItem) {
      console.log(item, levelItem);
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      if (!this.personId) {
        this.$emit("onLogin");
      } else {
        uni.navigateTo({
          url:
            "/pagesSub/companyCenter/interviewAI/interviewAnswer?positionId=" +
            item.positionId +
            "&id=" +
            "" + "&from=1&tagLabel=" + levelItem.tagLabel,
        });
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.style-scroll-view {
  height: calc(100vh - 584rpx);
}

.style-item {
  background-color: #f4f6f8;
  border-radius: 16rpx;
  margin-left: 32rpx;
  margin-right: 32rpx;
  margin-top: 32rpx;
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-top: 24rpx;
  padding-bottom: 32rpx;

  .style-title {
    display: flex;
    justify-content: space-between;
    // height: 100rpx;

    .style-title-content {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      font-size: 36rpx;
      color: #000000;
      line-height: 50rpx;
      text-align: left;
      font-style: normal;
    }

    .style-title-number {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      padding-top: 10rpx;
    }
  }

  .style-level-container {
    background: #f4f6f8;
    border: 16rpx;
    display: flex;
    align-items: center;
    margin-top: 32rpx;

    .style-level-item {
      background-color: #ffffff;
      border-radius: 12rpx;
      display: grid;
      justify-content: space-between;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16rpx;
      display: flex;
      flex-direction: column;
      width: -webkit-fill-available;
      margin: 0 15rpx;
      align-items: center;
      padding: 15rpx;

      .style-level-content {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .style-level-number {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>
